<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors  : cxguo
 * @LastEditTime : 2020-01-06 21:06:56
 -->
<template>
  <div class="app-container">
    <Tab
      :texts="['全部','今日','昨日','本月','上个月']"
      @on-date-range="onDateRange"
      @on-click="onTabClick"
    />
    <div>
      <el-card shadow="never" class="oper-btn-card">
        <vxe-grid
          ref="table"
          class="grid"
          border
          size="small"
          resizable
          highlight-hover-row
          :loading="tableLoading.stock"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :columns="columnsData"
          :data="tableData.stock"
        />
      </el-card>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.totalCount"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getStockList } from '@/api/stock/stock.js'
import Affix from '@/components/Affix'
import { getUpdateButton } from '@/components/Table/oper-btns.js'
import Tab from './tab'
export default {
  name: 'StockList',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, Tab },
  mixins: [oftenuse],
  data() {
    return {
      searchData: {},
      stockInfo: {
        oper: 'add',
        data: {}
      },
      dialogVisible: false,
      optionsData: {},
      columnsData: [
        { title: '操作', width: 80,
          slots: {
            default: (params) => {
              const h = this.$createElement
              const updateBtnNode = getUpdateButton(h, { props: { type: 'primary' },
                on: { click: () => { } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [updateBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'code', title: '商品编号', width: 120 },
        { field: 'name', title: '商品名称', width: 200, showOverflow: true },
        { field: 'specs', title: '规格', width: 150, showOverflow: true },
        { field: 'unit', title: '单位', width: 80,
          slots: {
            default: (params) => {
              const { row } = params
              const unitbaseStr = row.unitbase
              const unitbase = JSON.parse(unitbaseStr)
              const value = unitbase.name
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'canUseQuantity', title: '可用库存', width: 100,
          slots: {
            default: (params) => {
              const { row } = params
              const { quantity, waitQuantityIn, waitQuantityOut } = row
              const value = quantity + waitQuantityIn - waitQuantityOut
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'quantity', title: '当前存货', width: 100 },
        { field: 'originQuantity', title: '期初库存', width: 100 },
        { field: 'waitQuantityIn', title: '待出库量', width: 100 },
        { field: 'waitQuantityOut', title: '待入库量', width: 100 },
        { field: 'basePrice', title: '成本价', width: 100,
          slots: {
            default: (params) => {
              const { row } = params
              const basePriceStr = row.basePrice
              const value = this.getPriceByPriceJson(basePriceStr)
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'totalPrice', title: '库存总额', width: 150,
          slots: {
            default: (params) => {
              const { row } = params
              const basePriceStr = row.basePrice
              const quantity = row.quantity
              const price = this.getPriceByPriceJson(basePriceStr)
              const value = this.$amount(price).multiply(quantity).format()
              return [<span>{value}</span>]
            }
          }
        }
      ]
    }
  },
  watch: {
  },
  created() {
    this.getstockList()
  },
  methods: {
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getstockList().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // table btns
    // api
    getstockList(params = { data: this.searchData, pageInfo: this.pageInfo }) {
      this.setTableLoading('stock', true)
      return new Promise((resolve, reject) => {
        getStockList(params).then(res => {
          this.setTableLoading('stock', false)
          if (res.data.flag) {
            this.setTableData('stock', res.data.data)
            this.pageInfo = res.data.pageInfo
          } else {
            this.$notify.error({ title: '查询失败！', message: res.data.message })
          }
          resolve(res)
        }).catch(err => {
          this.setTableLoading('stock', false)
          this.$notify.error({ title: '查询异常！', message: err.message })
          reject(err)
        })
      })
    },
    getPriceByPriceJson(basePriceStr) {
      const basePrice = JSON.parse(basePriceStr)
      const key = Object.keys(basePrice)[0]
      const value = basePrice[key]
      return value
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('stock', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.rows = val
      this.getstockList()
    },
    onSwitchStatusChange(params, val) {
      const { row } = params
      this.updatestock(row).then(res => {
        if (res.data.flag) {
          this.$set(row, 'status', val)
        }
      })
    },
    onEditClosed(params, val) {
      const { row } = params
      this.updatestock(row).then(res => {
        if (res.data.flag) {
          // this.$set(row, 'status', val)
        }
      })
    },
    onCurrentChange(val) {
      this.pageInfo.page = val
      this.getstockList()
    },
    onDateRange(data) {

    },
    onTabClick(data) {
    }
  }
}
</script>
<style scoped>

</style>
